<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      v-model:activeFormData="formData"
      :columns="columns"
      :data-grid-title="dataGridTitle"
      :render-form-title="renderFormTitle"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <table class="dw-form-table">
          <tbody>
            <tr>
              <td class="dw-td-label"><span class="required">配置编码</span></td>
              <td>
                <el-form-item
                  prop="noticeConfigCode"
                  :rules="[
                    {
                      required: true,
                      message: '请填写配置编码!',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.noticeConfigCode" placeholder="请输入配置编码..."></el-input>
                </el-form-item>
              </td>
              <td class="dw-td-label"><span class="required">配置名称</span></td>
              <td>
                <el-form-item
                  prop="noticeConfigName"
                  :rules="[
                    {
                      required: true,
                      message: '请填写配置名称!',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.noticeConfigName" placeholder="请输入配置名称..."></el-input>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td class="dw-td-label"><span class="required">消息通知途径</span></td>
              <td :colspan="3">
                <el-form-item prop="noticeWay" :rules="[]">
                  <el-radio-group v-model.number="formData.noticeWay">
                    <el-radio-button label="企业微信" :value="1" />
                    <el-radio-button label="站内消息" :value="2" />
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr v-if="noticeWay === 1">
              <td class="dw-td-label"><span class="required">Webhook</span></td>
              <td :colspan="3">
                <el-form-item prop="webhook" :rules="[]">
                  <el-input v-model="formData.webhook"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr v-if="noticeWay === 1">
              <td class="dw-td-label">消息提及人员</td>
              <td :colspan="3">
                <el-form-item prop="mentioned">
                  <el-mention v-model="formData.mentioned" :options="options" placeholder="请选消息提及人">
                    <template #label="{ item }">
                      <div style="display: flex; align-items: center">
                        <el-avatar :size="24" :src="item.avatar" />
                        <span style="margin-left: 6px">{{ item.value }}</span>
                      </div>
                    </template>
                  </el-mention>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td class="dw-td-label"><span class="required">触发方式</span></td>
              <td :colspan="3">
                <el-form-item prop="triggerType" :rules="[]">
                  <el-radio-group v-model.number="formData.triggerType">
                    <el-radio-button label="接口调用" :value="1" />
                    <el-radio-button label="定时器调度" :value="2" />
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>

            <tr v-if="triaggerType === 2">
              <td class="dw-td-label"><span>Cron</span></td>
              <td>
                <el-form-item prop="cron" :rules="[]">
                  <el-input v-model="formData.cron">
                    <template #append> 配置 </template>
                  </el-input>
                </el-form-item>
              </td>
              <td class="dw-td-label"><span>启用状态</span></td>
              <td>
                <el-switch v-model.number="formData.status" :active-value="1" :inactive-value="0" class="mt-2" style="margin-left: 24px" />
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">通知模板类型</td>
              <td :colspan="3">
                <el-form-item prop="templateType" :rules="[]">
                  <el-radio-group v-model="formData.templateType">
                    <el-radio-button label="固定内容模板" :value="1" />
                    <el-radio-button label="接口请求模板" :value="2" />
                    <el-radio-button label="SQL请求模板" :value="3" />
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr v-if="templateType === 2">
              <td class="dw-td-label">接口配置</td>
              <td :colspan="3">
                <el-form-item prop="noticeContentTemplate" :rules="[]"> </el-form-item>
              </td>
            </tr>
            <tr v-if="templateType === 3">
              <td class="dw-td-label">SQL配置</td>
              <td :colspan="3">
                <el-form-item prop="noticeContentTemplate" :rules="[]"> </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">通知内容模板</td>
              <td :colspan="3">
                <el-form-item prop="noticeContentTemplate" :rules="[]">
                  <el-input type="textarea" v-model="formData.noticeContentTemplate" :rows="10"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">排序号</td>
              <td :colspan="3">
                <el-form-item prop="sortNo" :rules="[]">
                  <el-input-number v-model="formData.sortNo"></el-input-number>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import type { INoticeConfig } from './notice-config';
defineOptions({
  name: 'SysNoticeConfig',
});
const formData = ref<INoticeConfig>({
  id: '',
  noticeConfigCode: '',
  noticeConfigName: '',
  noticeContentTemplate: '',
  templateType: 1,
  noticeWay: 1,
  mentioned: '@',
  webhook: '',
  triggerType: 1,
  sortNo: 1,
  cron: '',
  status: 1,
});
const options = ref([
  {
    value: 'all',
    avatar: 'https://avatars.githubusercontent.com/u/27912232',
  },
]);
const dataGridTitle = '通知配置列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: INoticeConfig) => {
  if (stateValue === 'add') {
    return '通知配置信息';
  } else {
    return data.noticeConfigName;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'noticeConfigCode',
    label: '配置编码',
    align: 'left',
  },
  {
    prop: 'noticeConfigName',
    label: '配置名称',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/notice/config/#{id}',
  delInfoMsgEmphasize: '#{noticeConfigName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/notice/config/list',
};

const getPageHttpConfig: IGetPageHttpConfig<INoticeConfig> = {
  url: '/admin-api/sys/notice/config/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<INoticeConfig> = {
  url: '/admin-api/sys/notice/config/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<INoticeConfig> = {
  url: '/admin-api/sys/notice/config',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<INoticeConfig> = {
  url: '/admin-api/sys/notice/config',
};

const triaggerType = ref<number>(1);
const templateType = ref<number>(1);
const noticeWay = ref<number>(1);
</script>

<style lang="scss" scoped></style>
